﻿<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
  <script src="https://cdn.bootcss.com/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
  <style type="text/css">
    #panel{
      width: 400px;
      height: 100px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <div id="panel">
    <div id="add">
      <form class="form-inline">
        <div class="input-group">
          <input type="text" class="form-control form-control-sm typeahead" data-provide="typeahead" id="item"/>
          <div class="input-group-append">
            <button type="button"  class="btn btn-sm btn-outline-secondary" id="add_item"><i class="zmdi zmdi-plus"></i>&nbsp;add</button>
            <button type="button"  class="btn btn-sm btn-outline-secondary" id="clear">clear</button>
  <!--          <button type="button"  class="btn  btn-secondary" id="tip">tip</button>-->
          </div>
        </div>
      </form>
    </div>
    <div id="item_list">
      <ul>
        <li id="last_item" hidden="hidden"></li>
      </ul>
    </div>
  </div>
  <div id="js">
    <script type="text/javascript" charset="utf-8" src='finance.js'></script>
    <script type="text/javascript" charset="utf-8" src='app.js'></script>
  </div>
</body>
</html>